<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ResizeObserver Example</title>
    <style>
        #resizableElement {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            resize: both;/*这个按钮的意思就是可以进行调整宽高*/
            
            /* 允许用户调整元素的大小 */
            overflow: auto;
            /* 显示滚动条 */
        }
    </style>
</head>
<!-- ResizeObserver来进行监听 核心 -->
<body>
    <div id="resizableElement">
        拖动此元素的右下角来调整大小，并观察控制台中的输出。
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const resizable = document.getElementById('resizableElement');

            // 创建一个ResizeObserver实例，并传入回调函数
            const resizeObserver = new ResizeObserver(entries => {
                for (let entry of entries) {
                    // 获取元素的内容区域大小
                    const { width, height } = entry.contentRect;
                    // 在控制台中输出元素的宽高
                    console.log(`Element size changed: width = ${width}px, height = ${height}px`);
                }
            });

            // 开始观察指定的DOM元素
            resizeObserver.observe(resizable);
        });
    </script>
</body>

</html>